<template>
  <el-dialog title="审核" :visible.sync="$attrs.visableIf" @close="handleCloseDialog" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body width="1000px">
    <ul class="tags">
      <li @click="getTab(0)" :class="active==0?`active`:``">广告组</li>
      <li @click="getTab(1)" :class="active==1?`active`:``">广告计划</li>
    </ul>
    <div v-if="active==0">
      <div class="dialog-title">基本信息</div>
      <ul class="adContent">
        <li v-for="(item,index) in basicInfo">
          <div class="code">{{item.label}}</div>
          <div class="content">{{item.content}}</div>
        </li>

      </ul>
    </div>
    <div v-if="active==1">
      <div class="planView">
        <div class="table-big">
          <div class="dialog-title">基本信息</div>
          <el-table :data="tableDataList"
                    ref="advergroupTable"
                    :max-height="tableHeight"
                    class="tableHightClass"
          >
            <el-table-column :label="item.label" align="center" v-for="(item,index) in tableColumns" :prop="item.key" v-if="item.visible?item.visible:true" :fixed="item.fixed?item.fixed:false" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width"
                             width="80">
              <template slot-scope="scope">
                <div class="group-btn">
                  <el-tooltip content="编辑" placement="top" effect="light">
                    <img src="@/assets/images/tableEdit.png" alt="" @click="handleUpdate(scope.row)">
                  </el-tooltip>
                </div>

              </template>
            </el-table-column>
          </el-table>
          <div class="dialog-title">创意</div>
          <el-table :data="originalityDataList"
                    ref="advergroupTable"
                    :max-height="tableHeight"
                    class="tableHightClass"
          >
            <el-table-column :label="item.label" align="center" v-for="(item,index) in originalityTableColumns" :prop="item.key" v-if="item.visible?item.visible:true" :fixed="item.fixed?item.fixed:false" :show-overflow-tooltip="true">
              <!--用于表格自定义-->
              <template slot-scope="scope">
                <div v-if="item.key=='url'" class="imgUrl">
                  <img :src="scope.row[item.key]" style="width: 70px; height: 70px; object-fit: cover;margin: auto" @click="handleView(scope.row)" v-if="scope.row.type==1|| scope.row.type==2"/>
                  <img src="@/assets/images/video-defluft.png" v-else style="width: 70px; height: 70px; object-fit: cover;margin: auto" @click="handleView(scope.row)"/>
                </div>
                <div v-else-if="item.key=='links'">
                  <a :href="scope.row[item.key]" target="_blank">{{scope.row[item.key]}}</a>
                </div>
                <!--状态-->
                <div v-else>{{scope.row[item.key]}}</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="dialog-title">操作日志</div>
        <ul class="logsList" v-if="logsInfo && logsInfo.length>0">
          <li v-for="(item,index) in logsInfo" :key="index">
            <div class="mobile">
              <div class="code">
                <template v-if="item.status==1"> 创建人</template>
                <template v-else-if="item.status==2"> 修改人</template>
                <template v-else> 审核人</template>
              </div>
              <span>{{item.user_name.user_login}}</span>
            </div>
            <div class="createTime">
              <div class="code">
                <template v-if="item.status==1">创建时间</template>
                <template v-else-if="item.status==2">修改时间</template>
                <template v-else-if="item.status==3"> 审核成功时间</template>
                <template v-else> 审核失败时间</template>
              </div>
              {{item.create_time}}
            </div>
          </li>
        </ul>
        <div v-else class="nodata"><img src="../../assets/images/nodata.jpg"/></div>
      </div>
    </div>
    <div slot="footer" class="footer-btn">
      <el-button @click="getReject">审批驳回</el-button>
      <el-button @click="onSubmit('form')" type="primary">审批通过</el-button>
    </div>
    <editReviewPlanChanges v-if="showReviewPlanChanges" :visableIf.sync="showReviewPlanChanges" :position_id="position_id" :plate_id="plate_id" :childList="childList"></editReviewPlanChanges>
    <reject v-if="showReject" :visableIf.sync="showReject" @getReason="getReason" :id="$attrs.id" @closeParentDialog="handleCloseDialog"></reject>
    <viewMaterial v-if="viewMaterial" :visableIf.sync="viewMaterial" :imgInfo="imgInfo"></viewMaterial>
  </el-dialog>
</template>

<script>
  import { reqAdGroupByPlanId, reqPlanInfoById, reqPlanLogById, reqPlanCheckPass } from '@/api/advergroupPlanMgt/index'

  export default {
    name: 'editReviewPlanDetails',
    components: {
      editReviewPlanChanges: () => import('./editReviewPlanChanges.vue'),
      reject: () => import('./reject.vue'),
      'viewMaterial': () => import('./viewMaterial'),
    },
    data() {
      return {
        active: 0,//选中
        viewMaterial: false,//查看素材
        imgInfo: {
          type: null,
          info: null
        },
        showReviewPlanChanges: false,
        showReject: false,//驳回弹窗
        tableDataList: [],//表格数据
        position_id: null,//版位id
        plate_id: null,//平台id
        tableHeight: 200,
        tableColumns: [
          { key: 'directional', label: `投放版位`, visible: true, fixed: true },
          { key: 'position', label: `用户定向`, visible: true, fixed: true },
          { key: 'startTime', label: `开始日期`, visible: true, fixed: true },
          { key: 'endTime', label: `结束日期`, visible: true, fixed: true },
          { key: 'totleCoin', label: `预算`, visible: true, fixed: true },
          { key: 'pay_type_name', label: `出价方式`, visible: true, fixed: true },
          { key: 'custom_coin', label: `投放日预算`, visible: true, fixed: true },
          { key: 'msg', label: `备注`, visible: true }
        ],
        originalityDataList: [],
        originalityTableColumns: [
          { key: 'directional', label: `投放版位`, visible: true, fixed: true },
          { key: 'name', label: `创意`, visible: true, fixed: true },
          { key: 'typeName', label: `格式`, visible: true, fixed: true },
          { key: 'islimit', label: `是否限时`, visible: true, fixed: true },
          { key: 'isforce', label: `强制观看`, visible: true, fixed: true },
          { key: 'url', label: `缩略图`, visible: true, fixed: true },
          { key: 'links', label: `跳转链接`, visible: true, fixed: true },
          { key: 'textmsg', label: `文字描述`, visible: true,  },
        ],
        basicInfo: [
          //基本信息
          { key: 'advert_id', label: '广告组ID', content: '' },
          { key: 'name', label: '广告组名称', content: '' },
          { key: 'plugName', label: '推广方式', content: '' },
          { key: 'groupName', label: '广告组类型', content: '' },
          { key: 'put_name', label: '投放类别', content: '' },
          { key: 'budget_coin', label: '广告组预算', content: '' },
          { key: 'mobile', label: '发起人', content: '' },
          { key: 'status_name', label: '发布状态', content: '' },
          { key: 'create_time', label: '创建时间', content: '' }

        ],
        logsInfo: [],
        realTimeData: [
          //实时数据
          { key: 'advert_id', label: '广告组预算（广告币）', content: '' },
          { key: 'plan_order', label: '消耗（广告币）', content: '' },
          { key: 'plugName', label: '展示数', content: '' },
          { key: 'name', label: '广告组名称', content: '' },
          { key: 'type', label: '点击数', content: '' },
          { key: 'mobile', label: '点击率', content: '' },
          { key: 'mobile', label: '平均点击消耗（广告币）', content: '' },
          { key: 'mobile', label: '转化数', content: '' },
          { key: 'mobile', label: '平均转化成本', content: '' },
          { key: 'mobile', label: '转化率', content: '' },
          { key: 'mobile', label: '深度转化数', content: '' },
          { key: 'mobile', label: '深度转化成本', content: '' },
          { key: 'mobile', label: '深度转化率', content: '' },
          { key: 'mobile', label: '投放活动链接', content: '' }
        ],
        taskInfo: null,//提交的信息
        form: {
          id: null,//计划id
          task: null//活动json
        },
        noForm: {
          id: null,
          msg: ''//计划id
        },
        childList: []//活动集合

      }
    },
    created() {
      this.getLogList()//获取日志
      this.getAdGroupInfo()//获取广告组信息
      this.getPlanList()//获取广告组计划
    },
    methods: {
      getPlanList() {
        reqPlanInfoById(this.$attrs.id).then(res => {
          console.log('计划信息', res)
          this.tableDataList = []
          let position = res.data.position
          position.forEach(item => {
            item.directional = item.position.name
            let list = []
            item.direct.forEach(sitem => {
              if (sitem.more && sitem.more.length > 0) {
                sitem.more.forEach(vitem => {
                  let text = ''
                  if (vitem.province && vitem.city && vitem.area) {
                    text = vitem.province + '-' + vitem.city + '-' + vitem.area
                  } else if (vitem.province && vitem.city) {
                    text = vitem.province + '-' + vitem.city
                  } else {
                    text = vitem.province
                  }
                  list.push(text)
                  item.position = list.join(',')//用户定向
                })
              } else {
                let text = ''
                if(!sitem.more){
                  item.position='全国'
                }else {
                  if (sitem.more.province && sitem.more.city && sitem.more.area) {
                    text = sitem.more.province + '-' + sitem.more.city + '-' + sitem.more.area
                  } else if (sitem.more.province && sitem.more.city) {
                    text = sitem.more.province + '-' + sitem.more.city
                  } else {
                    text = sitem.more.province
                  }
                  list.push(text)
                  item.position = list.join(',')//用户定向
                }

              }
            })

            item.startTime = item.plan.start_time//开始时间
            item.endTime = item.plan.end_time//结束时间
            item.totleCoin = item.freeze_score + item.score//预算
            item.pay_type_name = item.plan.pay_type_name//出价方式
            item.custom_coin = item.plan.custom_coin//投放日预算
            item.msg = item.plan.msg//备注
          })
          console.log('position', position)
          this.tableDataList = position
          //创意
          let originalityList = res.data.param
          originalityList.forEach(item => {
            item.directional = item.position ? item.position.position.name : null //投放版位
            item.name = item.more.creative_name//创意名称
            item.type = item.more.type;//素材类型
            item.typeName = item.more.type == 1 ? `静态图` : item.more.type == 2 ? `动态图` : `视频`
            item.islimit = item.more.islimit == 1 ? item.more.limit_time : `否`//是否限时
            item.isforce = item.more.isforce == 1 ? `是` : `否`
            item.url = item.more.url.startsWith("http") ? item.more.url : this.domain + '/' + item.more.url//url
            item.links = item.more.link//调转链接
            item.textmsg=item.more.textmsg;//文字描述

          })
          console.log('创意', originalityList)
          this.originalityDataList = originalityList//创意
        })
      },
      getAdGroupInfo() {
        //获取广告组信息
        reqAdGroupByPlanId(this.$attrs.advertId).then(res => {
          let form = res.data//数据展示
          let plugList = []
          form.plug.forEach(sitem => {
            plugList.push(sitem.plug.name)
          })
          form.plugName = plugList.join(',')//推广渠道
          let grouptypeList = []
          form.grouptype.forEach(sitem => {
            grouptypeList.push(sitem.type_name)
          })
          form.groupName = grouptypeList.join(',')//广告类型
          form.mobile = form.custom.mobile
          this.basicInfo.forEach((item, index) => {
            item.content = form[item.key]
          })

        })
      },
      getLogList() {
        reqPlanLogById(this.$attrs.orderId).then(res => {
          console.log('日志---', res)
          this.logsInfo = res.data.list

        })
      },
      getReason(info) {
        this.noForm.id = this.$attrs.id//计划id
        this.noForm.msg = info//驳回原因
      },
      getTab(index) {
        this.active = index

      },
      handleUpdate(row) {
        //在点击列表后的编辑
        this.position_id = row.id
        this.form.id = this.$attrs.id
        this.showReviewPlanChanges = true

      },
      getReject() {
        this.showReject = true
      },
      onSubmit() {
        this.form.id = this.$attrs.id
        this.form.task = localStorage.getItem('activityList')
        this.$modal.confirm(`确定要审批通过吗？`).then(() => {
          reqPlanCheckPass(this.form).then(res => {
            this.$modal.msgSuccess('提交成功！')
            this.handleCloseDialog();
            localStorage.setItem('activityList', JSON.stringify([]))
          })

        })
      },
      handleCloseDialog() {
        this.$emit('update:visableIf', false)
        this.$emit('handleQuery') //更新列表;
      },
      handleView(row) {
        console.log('查看素材', row)
        this.imgInfo.type = row.type;
        console.log('type====',this.imgInfo.type);
        this.imgInfo.info = row.url
        this.viewMaterial = true

      },
    }
  }
</script>

<style scoped lang="scss">
  .adType {
    display: flex;
    flex-direction: column;
    border: 1px solid #eee;
    padding: 0px;
    margin: 0px;

    li {
      display: flex;
      line-height: 20px;
      padding: 10px 10px;
      border-bottom: 1px solid #eee;

      > span {
        width: 135px;
        display: flex;
        position: relative;
        margin-right: 10px;
        justify-content: center;

        &:after {
          content: '';
          position: absolute;
          right: 0px;
          top: -5px;
          bottom: -5px;
          background: #eee;
          width: 1px;
        }
      }

      > div {
        flex: 1;
        justify-content: center;
        display: flex;
      }
    }
  }

  .tags {
    display: flex;
    align-items: center;
    padding-left: 0;

    li {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 32px;
      border: 1px solid #eee;
      color: #444;
      width: 88px;
      cursor: pointer;


      &.active {
        color: #fff;
        border-color: #1670F1;
        background: #1670F1;
      }
    }

  }

  .adContent {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #eee;
    padding-left: 0px;
    margin: 0;
    margin-top: 10px;

    &.dataList {
      .code {
        width: 180px;

      }
    }

    li {

      height: 40px;
      display: flex;
      line-height: 20px;
      font-size: 14px;
      width: 50%;
      border-bottom: 1px solid #eee;
      border-right: 1px solid #eee;
      align-items: center;

      &:nth-child(2n) {
        border-right: none;
      }

      .code {
        color: #444;
        background: #FAFAFA;
        width: 100px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 20px;
        box-sizing: border-box;
        font-weight: bold;
      }

      .content {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        line-height: 20px;
        padding-left: 20px;
        color: #000;
      }
    }

  }

  .dialog-title {
    height: 30px;
    display: flex;
    align-items: center;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .dialog-title {
    & + .el-table {
      margin-bottom: 20px;
    }
  }

  ::v-deep .el-dialog__body {
    max-height: calc(100vh - 250px);
  }

  ::v-deep .el-table .el-table__header-wrapper th, ::v-deep .el-table .el-table__fixed-header-wrapper th {
    color: #000;
  }

  .logsList {
    padding-left: 0px;

    li {
      height: 81px;
      background: #F7F9FF;
      border: 1px solid #ABC0DE;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 16px 20px;
      color: #000;
      margin-bottom: 10px;

      .code {
        margin-bottom: 6px;
      }

      span {
        font-weight: bold;
      }
    }
  }

  .logsList {
    padding-left: 0px;

    li {
      height: 81px;
      background: #F7F9FF;
      border: 1px solid #ABC0DE;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 16px 20px;
      color: #000;
      margin-bottom: 10px;

      .code {
        margin-bottom: 6px;
      }

      span {
        font-weight: bold;
      }
    }
  }

  .nodata {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 200px;
      height: auto;
    }
  }
  .imgUrl {
    color: #fff;
    cursor: pointer;
    width: 70px;
    height: 70px;
    margin: auto;
    background: #1670F1;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
  }
</style>
